doctype html
html
	head
		meta(charset="utf-8")
		meta(http-equiv="Content-Type",content="text/html; charset=utf-8")
		include ../common/nfile
		script(src="#{base}/js/jquery.min.js",type="text/javascript",charset="utf-8")
		script(src="#{base}/js/utils.js",type="text/javascript",charset="utf-8")
		script(src="#{base}/ace/ace.js",type="text/javascript",charset="utf-8")
		script(src="#{base}/ace/ext-statusbar.js",type="text/javascript",charset="utf-8")
		script(src="#{base}/ace/ext-language_tools.js",type="text/javascript")
		script(src="#{base}/ace/ext-beautify.js",type="text/javascript")
		script(src="#{base}/vkbeautify/vkbeautify.0.99.00.beta.min.js",type="text/javascript")
		script(src="#{base}/js/edit.js", type="text/javascript")
		style.
			body {
					overflow: hidden;
			}
			#editor {
					margin: 0;
					position: absolute;
					top: 0;
					bottom: 20px;
					left: 0;
					right: 0;
					font-size: 16px;
			}
			#statusBar {
					margin: 0;
					padding: 0;
					position: absolute;
					left: 0;
					right: 0;
					bottom: 0;
					height: 20px;
					background-color: rgb(245, 245, 245);
					color: gray;
			}
			.ace_status-indicator {
					color: gray;
					position: absolute;
					right: 0;
					border-left: 1px solid;
			}
			.float-frame {
					position: fixed;
					width: 500px;
					height: 700px;
					right: 30px;
					top: 30px;
					border: 1px solid gray;
					opacity: 1;
					z-index: 10;
					background: white;
			}
			.float-frame iframe {                
					border: none;
					padding-top: 25px;
					box-sizing: border-box;
			}
			.float-frame-title {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					margin: 0;
					background: transparent;
					padding: 0px 0px 6px 6px;
					background-color: #95B8E7;
					box-sizing: border-box;
					cursor: move;
			}
				.float-frame-title span {
						font-size: 12px;
						font-weight: bold;
						color: #0E2D5F;
						height: 16px;
						line-height: 16px;
				}
				.float-frame-title a {
						content: "x";
						opacity: 1;
						filter: alpha(opacity=100);
						background-color: #eaf2ff;
						-moz-border-radius: 3px 3px 3px 3px;
						-webkit-border-radius: 3px 3px 3px 3px;
						border-radius: 3px 3px 3px 3px;
						display: inline-block;
						width: 16px;
						height: 16px;
						background: url('#{base}/theme/default/images/panel_tools.png') no-repeat -16px 0;
						position: absolute;
						top: 5px;
						right: 5px;
				}
	body
			#editor #{content}
			#statusBar
			script.
				window.editor = initEditor({
					path: "#{pp}",
					ext: "#{ext}",
					mtime: "#{mtime}"
				});
			if ext === "md"
				div.float-frame
						div.float-frame-title
								span 预览效果
								a.float-frame-close(style="display:none;")
						iframe#editViewer(height="100%",width="100%",scroll="auto",style="display:none;")
				script(type="text/javascript",src="#{base}/js/readme-editor.js")

